<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.0.min.js"></script>
</head>

<body>

    <table>
        <tr>
            <td>id</td>
            <td>标题</td>
            <td>操作</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="id" value="1"></td>
            <td>标题1</td>
            <td><a class="del" data-nid="1">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="id" value="2"></td>
            <td>标题2</td>
            <td><a class="del" data-nid="2">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="id" value="3"></td>
            <td>标题3</td>
            <td><a class="del" data-nid="3">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="id" value="4"></td>
            <td>标题4</td>
            <td><a class="del" data-nid="4">删除</a></td>
        </tr>
    </table>
    <input type="button" value="全选">
    <input type="button" value="反选">
    <input type="button" value="删除">

    <script>
        $(function() {
            $("input[value='全选']").on("click", function() {
                // 设置全选属性的值
                $("input[name='id']").prop("checked", true);
            })
            $("input[value='反选']").on("click", function() {
                // 设置全选属性的值
                $("input[name='id']").each(function() {
                    // 获取checked属性
                    // prop  设置，获取属性checked，selected    值为布尔值
                    let status = $(this).prop("checked");
                    $(this).prop("checked", !status);
                })
            })
            $(".del").on("click", function() {
                // let id = $(this).attr("data-nid");
                // data()获取data-开头的属性的值
                let id = $(this).data("nid");
                console.log(id);
            })
            $("input[value='删除']").on("click", function() {
                let ids = [];
                // :checked选中的
                $("input[name='id']:checked").each(function() {
                    ids.push($(this).val());
                })
                console.log(ids);
            })
        })
    </script>

</body>

</html>